<template>
	<div class="main">
		<cvue-dialog :dialogVisible='dialogVisible' title='新增聚合页' :isShowFoot='true' dialogWidth='60%' @handleOpen='getDetail' @closeDialog='closeDialog' @confirmDialog='confirmDialog' @handleClose='closeDialog'>
			<div class="dialog-body" slot="dialogBody">
				<el-form inline label-width="130px">
					<el-form-item label="图片">
						<upload ref="upload" :accept="['.png','.jpg','.jpeg']" :fileSize="{size:1024*1024*10,messge:'只能上传10m以内的图片'}">
						</upload>
					</el-form-item>
					<el-form-item label="系统名" required>
						<el-input class="formWidth" type="text" v-model.trim="terminal.title" maxlength="20"></el-input>
					</el-form-item>
					<el-form-item label="系统URL" required>
						<el-input class="formWidth" type="text" v-model.trim="terminal.url"></el-input>
					</el-form-item>
					<el-form-item label="启用">
						<el-switch v-model="terminal.isActive">
						</el-switch>
					</el-form-item>
				</el-form>
				<el-form inline label-width="130px">
					<el-form-item label="标志" required>
						<el-input class="formWidth" type="text" v-model.trim="terminal.mark" maxlength="20"></el-input>
					</el-form-item>
					<el-form-item label="排序" required>
						<el-input class="formWidth" type="number" v-model="terminal.sort" maxlength="20"></el-input>
					</el-form-item>
				</el-form>
				<el-form inline label-width="130px">
					<el-form-item label="终端类型" required>
						<el-select class="formWidth" v-model="terminal.terminalType" placeholder="请选择">
							<el-option label="pc" value="pc">
							</el-option>
							<el-option label="mobile" value="mobile">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="权限码">
						<el-input class="formWidth" type="text" v-model.trim="terminal.permissionCode" maxlength="20"></el-input>
					</el-form-item>
				</el-form>
			</div>
		</cvue-dialog>
	</div>
</template>
<script>
/* eslint-disable */
import Vue from 'vue'
import cvueDialog from '@/components/cvue-dialog'
import upload from '@/components/upload2'
export default {
	name: 'editList',
	components: {
		cvueDialog, upload
	},
	props: {
		dialogVisible: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {

		}
	},
	computed: {
		terminal() {
			return this.$store.state.conectPage.terminal
		}
	},
	methods: {
		getDetail() {
			this.$nextTick(
				() => {
					this.$refs.upload.progressList = [{ url: this.terminal.icon }]
				}
			)
		},
		closeDialog() {
			this.$emit('closeDialog')
		},
		confirmDialog() {
			this.editList()
			// this.$emit('confirmDialog')
		},
		editList() {
			if (!this.check()) {
				return
			}
			var urls = []
			this.$refs.upload.getFileList().forEach(item => {
				urls.push(item.url)
			})
			this.terminal.icon = urls.join()
			var params = this.terminal
			this.$store.dispatch('conectPage/EditAggregateMenus', params).then(
				res => {
					this.$message.success('编辑成功')
					this.$emit('confirmDialog')
				}
			)
		},
		check() {
			if (!this.terminal.title) {
				this.$message.error('系统名不能为空')
				return false
			}
			if (!this.terminal.url) {
				this.$message.error('系统URL不能为空')
				return false
			}
			if (!this.terminal.mark) {
				this.$message.error('标志不能为空')
				return false
			}
			if (this.terminal.sort.length == 0) {
				this.$message.error('排序不能为空')
				return false
			}
			if (!this.terminal.terminalType) {
				this.$message.error('请选择终端类型')
				return false
			}
			return true
		}
	}
}
</script>
<style scoped>
.main {
	background: #fff;
}
</style>
